<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 800px;
        height: 600px;
        border: 1px solid gray;
        position: relative;
    }
    #wod{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    #content{
        position: absolute;
        top: 0;
        right: 0;
        width: 180px;
        height: 400px;
        background-color: aqua;
        border: 1px solid gray;
        display: none;
        text-align: center;
        float: right;
    }
    .yang{
        width: 80px;
        height: 20px;
        background-color: white;
        border: 1px solid gray;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    #bbt{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 20px;
    }
   
</style>

<body>
    <!-- 27.点击按钮切换页面整体的背景色和文字大小 -->
    <div class="box">
        <input type="button" id="bbt" value="点击显示div样式">
        <div id="wod">
                <div id="content">
                        <h2>大小</h2>
                        <p class="yang" id="ou">100*100</p>
                        <p class="yang" id="oy">200*200</p>
                        <h2>颜色</h2>
                        <p class="yang" id="oz">#ff0000</p>
                        <p class="yang" id="ol">#00ff00</p>
                        <input type="button" id="qr" value="确认">
                        <input type="button" id="qx" value="取消">
                    </div>
                </div>
            </div>

</body>
<script type="text/javascript">
    var bbt = document.getElementById('bbt');
    bbt.onclick = function(){
       content.style.display = "block";
      
    }
    var content = document.getElementById('content');
    
  var ou = document.getElementById('ou')
  ou.onclick = function(){
     wod.style.width = "200px";
     wod.style.height = "400px";
  }

 
  var qr = document.getElementById('qr');
  qr.onclick = function(){
       content.style.display='none';
    }
  var qx = document.getElementById('qx');
     qx.onclick = function(){
        wod.style.width='1px';
     }

 var oy = document.getElementById('oy')
  oy.onclick = function(){
     wod.style.width = "300px";
     wod.style.height = "300px";
    

  }
  var oz = document.getElementById('oz')
  oz.onclick = function(){
     
     wod.style.backgroundColor = "yellow";

  }
  var ol = document.getElementById('ol');
  ol.onclick = function(){
    
     wod.style.backgroundColor = "pink";

  }  
</script>
</html>